<template>
  <view class="pageLayout">
    <!-- <ModuleTopPanel></ModuleTopPanel> -->
    <view class="info_card">
      <!-- 用户基础信息 -->
      <view class="customer_info_card">
        <view class="phoneIcon" @click="callPhone">
          <u-icon name="phone-fill" size="14" color="#6d5dd3"></u-icon>
        </view>
        <u-row>
          <u-col span="6">
            <view class="customer_info_box">
              <view class="title">客户名称</view>
              <view class="name">{{ detail.customerName }}</view>
            </view>
          </u-col>
          <!--  -->
          <u-col span="6" v-if="detail.contactQRCode">
            <view class="customer_info_box">
              <view class="title">客户二维码</view>
              <view class="name" style="color: #2979ff" @click="showQRCode"
                >查看</view
              >
            </view>
          </u-col>
        </u-row>

        <u-row>
          <u-col span="6">
            <view
              class="customer_info_box"
              @click="
                copy(
                  detail.customerPhoneNumber ? detail.customerPhoneNumber : ''
                )
              "
            >
              <view class="title" style="display: flex"
                >联系方式
                <u-icon name="file-text" color="#005ed2" size="16"></u-icon>
              </view>
              <view class="name">{{
                detail.customerPhoneNumber ? detail.customerPhoneNumber : "——"
              }}</view>
            </view>
          </u-col>
          <u-col span="6">
            <view
              class="customer_info_box"
              @click="copy(detail.appNumber ? detail.appNumber : '')"
            >
              <view class="title" style="display: flex"
                >APP账号
                <u-icon name="file-text" color="#005ed2" size="16"></u-icon>
              </view>
              <view class="name">{{
                detail.appNumber ? detail.appNumber : "——"
              }}</view>
            </view>
          </u-col>
        </u-row>
        <view class="tag_box">
          <view
            class="tips s"
            v-if="detail.customerServiceCustomerSourceLevel === 'S'"
            >S级</view
          >
          <view
            class="tips a"
            v-else-if="detail.customerServiceCustomerSourceLevel === 'A'"
            >A级</view
          >
          <view
            class="tips b"
            v-else-if="detail.customerServiceCustomerSourceLevel === 'B'"
            >B级</view
          >
          <view
            class="tips c"
            v-else-if="detail.customerServiceCustomerSourceLevel === 'C'"
            >C级</view
          >
          <view
            class="tips d"
            v-else-if="detail.customerServiceCustomerSourceLevel === 'D'"
            >D级</view
          >
          <!-- <view class="tips Approve" v-if="!tagInfo.hasApprove">待审核</view> -->
          <text
            class="tips Approve"
           
            >{{ statusTextMap.get(detail.customerResourceState) }}</text
          >
        </view>
        <view class="tag_box" style="margin-top: 10rpx">
          <view class="tips hasLink" v-if="tagInfo.hasLink">已拍</view>
          <view class="tips hasLink" v-if="tagInfo.linkType === 'FiveThousand'"
            >5000链接</view
          >
          <view class="tips hasLink" v-if="tagInfo.linkType === 'OneThousand'"
            >1000链接</view
          >
          <view
            class="tips hasLink"
            v-if="tagInfo.serviceType === 'OnLineShipping'"
            >线上代买</view
          >
          <view
            class="tips hasLink"
            v-if="tagInfo.serviceType === 'OfflineViewing'"
            >线下带看</view
          >
          <view class="tips hasLink" v-if="tagInfo.hasWeChat">已添加微信</view>
          <view class="tips hasLink" v-if="tagInfo.isInvalid">无效客资</view>
          <view class="tips hasLink" v-if="tagInfo.isHignIntention"
            >高意向</view
          >
          <view
            class="tips hasLink"
            v-for="(item, index) in tagInfo.listThreeLevelTag"
            :key="index"
            >{{ item.tag }}</view
          >
        </view>
      </view>
      <!-- 步骤条 -->
      <view class="step_box">
        <u-steps
          :current="statusMap.get(detail.customerResourceState)"
          activeColor="#a22c26"
          class="custom-steps"
        >
          <u-steps-item
            v-for="(item, index) in stepsList"
            :key="index"
            :title="item.title"
          >
            <view slot="icon">
              <view
                class="slot-icon-haslink"
                slot="icon"
                v-if="
                  detail.hasLink &&
                  index === 3 &&
                  index > statusMap.get(detail.customerResourceState)
                "
                >{{ index }}</view
              >
              <view
                class="slot-icon-haslink"
                slot="icon"
                v-else-if="
                  index > statusMap.get(detail.customerResourceState) &&
                  index - 1 < statusMap.get(detail.customerResourceState)
                "
                >{{ index }}</view
              >
              <view
                class="slot-icon"
                slot="icon"
                v-else-if="index > statusMap.get(detail.customerResourceState)"
                >{{ index }}</view
              >
              <u-icon
                name="checkmark-circle-fill"
                color="#a22c26"
                size="25"
                v-else
              ></u-icon>
            </view>
          </u-steps-item>
        </u-steps>
      </view>
      <!-- 外出申请记录组件 -->
      <!-- <carInfo :detail="detail"></carInfo> -->

      <!-- 跟进信息 -->
      <view
        class="info_box"
        v-if="statusMap.get(detail.customerResourceState) >= 1"
      >
        <!-- <view class="editIcon" @click="editDetail('edit')">
          <u-icon name="edit-pen-fill" color="#15c0e6" size="16"></u-icon>
          <view style="color: #15c0e6"> 修改 </view>
        </view> -->
        <view class="server_info">
          <u-row>
            <u-col span="4">
              <view class="">
                <view class="info_title">
                  <u-icon name="home-fill" color="#8d8d92" size="14"></u-icon>
                  <view> 面积 </view>
                </view>
                <view class="info_name">{{
                  tagInfo.area ? tagInfo.area + "㎡" : "——"
                }}</view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="">
                <view class="">
                  <view class="info_title">户型</view>
                  <view class="info_name">{{
                    tagInfo.houseType ? tagInfo.houseType : "——"
                  }}</view>
                </view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="">
                <view class="">
                  <view class="info_title">预算</view>
                  <view class="info_name">{{
                    tagInfo.budget
                      ? (tagInfo.budget / 10000).toFixed(2) + "万"
                      : "——"
                  }}</view>
                </view>
              </view>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="4">
              <view class="">
                <view class="info_title">风格</view>
                <view class="info_name">{{
                  tagInfo.style ? tagInfo.style : "——"
                }}</view>
              </view>
            </u-col>
          </u-row>
        </view>
        <u-row>
          <u-col span="4">
            <view class="">
              <view class="info_title">是否来佛</view>
              <view class="info_name" v-if="tagInfo.comeType == 'UnClear'"
                >不清楚</view
              >
              <view class="info_name" v-else-if="tagInfo.comeType == 'Come'"
                >来</view
              >
              <view class="info_name" v-else-if="tagInfo.comeType == 'NotCome'"
                >不来</view
              >
            </view>
          </u-col>
          <u-col span="4">
            <view class="">
              <view class="">
                <view class="info_title">来佛时间</view>
                <view class="info_name">{{
                  tagInfo.comeTime
                    ? formatTimestamp(tagInfo.comeTime, "onlyDate")
                    : "——"
                }}</view>
              </view>
            </view>
          </u-col>
          <u-col span="4">
            <view class="">
              <view class="">
                <view class="info_title">下次跟进时间</view>
                <view class="info_name">{{
                  tagInfo.nextFollowUpTime
                    ? formatTimestamp(tagInfo.nextFollowUpTime, "onlyDate")
                    : "——"
                }}</view>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
      <!-- 录入详情 -->
      <view class="info_box">
        <view
          class="editIcon reloadIcon"
          @click="reloadCus()"
          v-if="detail.allocationWay == 'CustomerResourcePool'"
        >
          <u-icon name="reload" color="#a22c26" size="16"></u-icon>
          <view style="color: #a22c26"> 客资申诉 </view>
        </view>
        <!-- <view class="editIcon" @click="editDetail">
        <u-icon name="edit-pen-fill" color="#15c0e6" size="20"></u-icon>
      </view> -->
        <view class="val_box">
          <view class="info_title">
            <u-icon name="clock-fill" color="#8d8d92" size="14"></u-icon>
            <view>分配时间</view>
          </view>
          <view class="info_name">{{
            formatTimestamp(detail.allocationTime, "onlyDate")
          }}</view>
        </view>
        <view class="server_info">
          <u-row>
            <u-col span="4">
              <view class="">
                <view class="info_title">
                  <u-icon
                    name="account-fill"
                    color="#8d8d92"
                    size="14"
                  ></u-icon>
                  <view> 客服 </view>
                </view>
                <view class="info_name">{{ detail.customerServiceName }}</view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="">
                <view class="">
                  <view class="info_title">组别</view>
                  <view class="info_name">{{
                    detail.customerServiceTeamName
                      ? detail.customerServiceTeamName
                      : "——"
                  }}</view>
                </view>
              </view>
            </u-col>
            <u-col span="4">
              <view class="">
                <view class="">
                  <view class="info_title">组长</view>
                  <view class="info_name">{{
                    detail.customerServiceGroupLeaderName
                      ? detail.customerServiceGroupLeaderName
                      : "——"
                  }}</view>
                </view>
              </view>
            </u-col>
          </u-row>
          <u-row>
            <u-col span="4">
              <view class="">
                <view class="info_title">客资来源</view>
                <view class="info_name">{{
                  detail.customerResourceSourceName
                }}</view>
              </view>
            </u-col>
          </u-row>
        </view>
        <view class="val_box">
          <view class="info_title">
            <u-icon name="calendar-fill" color="#8d8d92" size="14"></u-icon>
            <view> 录入时间 </view>
          </view>
          <view class="info_name">{{
            formatTimestamp(detail.createTime, "onlyDate")
          }}</view>
        </view>
        <view class="val_box">
          <view class="info_title">客户需求/备注</view>
          <view class="info_name">{{ detail.remark }}</view>
        </view>
        <u-row>
          <u-col span="4">
            <view class="">
              <view class="info_title">主播</view>
              <view class="info_name">{{
                detail.anchorName ? detail.anchorName : "——"
              }}</view>
            </view>
          </u-col>
          <u-col span="4">
            <view class="">
              <view class="">
                <view class="info_title">组别</view>
                <view class="info_name">{{
                  detail.anchorGroupName ? detail.anchorGroupName : "——"
                }}</view>
              </view>
            </view>
          </u-col>
          <u-col span="4">
            <view class="">
              <view class="">
                <view class="info_title">组长</view>
                <view class="info_name">{{
                  detail.anchorGroupLeaderName
                    ? detail.anchorGroupLeaderName
                    : "——"
                }}</view>
              </view>
            </view>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="4">
            <view class="">
              <view class="info_title">剪辑</view>
              <view class="info_name">{{
                detail.editName ? detail.editName : "——"
              }}</view>
            </view>
          </u-col>
          <u-col span="4">
            <view class="">
              <view class="">
                <view class="info_title">组别</view>
                <view class="info_name">{{
                  detail.editTeamName ? detail.editTeamName : "——"
                }}</view>
              </view>
            </view>
          </u-col>
          <u-col span="4">
            <view class="">
              <view class="">
                <view class="info_title">内容组长</view>
                <view class="info_name">{{
                  detail.contentLeaderName ? detail.contentLeaderName : "——"
                }}</view>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>
    <view class="bot_btn" v-if="detail.customerResourceState !== 'LinkRefund'">
      <view class="btn_width">
        <!-- <u-button
          class="btn"
          @click="editDetail('edit')"
          size="small"
          shape="circle"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:30rpx; border:1rpx solid #a22d27; color: #ffffff;font-weight:700;"
          >编辑客资</u-button
        > -->
        <u-button
          class="btn"
          @click="editDetail"
          size="small"
          shape="circle"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:30rpx; border:1rpx solid #a22d27; color: #ffffff;font-weight:700;"
          >记录跟进</u-button
        >
        <!-- <u-button
          v-if="detail.customerResourceLinkState === 'Confirmed'"
          class="btn"
          @click="applyOut"
          size="small"
          shape="circle"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:30rpx; border:1rpx solid #a22d27; color: #ffffff;font-weight:700;"
          >外出申请</u-button
        > -->
        <u-button
          v-if="detail.customerResourceState === 'FollowUp'"
          class="btn"
          @click="gotoReview"
          size="small"
          shape="circle"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:30rpx; border:1rpx solid #a22d27; color: #ffffff;font-weight:700;"
          >提交链接审核</u-button
        >
        <u-button
          v-if="detail.customerResourceState === 'InvitationManager'"
          class="btn"
          @click="gotoUpdataLink"
          size="small"
          shape="circle"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:30rpx; border:1rpx solid #a22d27; color: #ffffff;font-weight:700;"
          >链接升级申请</u-button
        >
        <u-button
          v-if="detail.customerResourceState === 'InvitationManager'"
          class="btn"
          @click="gotoResourceRefund"
          size="small"
          shape="circle"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:30rpx; border:1rpx solid #a22d27; color: #ffffff;font-weight:700;"
          >链接退款申请</u-button
        >
      </view>
    </view>

    <!-- <view class="edit_btn" @click="gotoReview">
      <u-icon
        name="https://www.yinyaoit.com/YY/shenheicon.png"
        color="#ffffff"
        size="24"
      ></u-icon>
    </view> -->
  </view>
</template>

<script>
import store from "../../store/index";
import { getCustomerInfoByID, getCustomerTagByID } from "@/api/customer/index";
import ModuleTopPanel from "@/components/ModuleTopPanel.vue";
import carInfo from "./components/carInfo.vue";
export default {
  components: {
    ModuleTopPanel,
    carInfo,
  },
  data() {
    return {
      id: "",
      detail: {},
      current: 3,
      stepsList: [
        { title: "分配" },
        { title: "跟进" },
        { title: "审核" },
        { title: "链接" },
        // { title: "服务" },
        // { title: "成交" },
      ],
      statusMap: new Map([
        ["Assigned", 0],
        ["FollowUp", 1],
        ["PendingApprove", 1],
        ["ToLinkToBeConfirm", 1.5],
        ["InvitationManager", 3],
        // ["Transacted", 5],
      ]),
      statusTextMap: new Map([
        ["Assigned", "已分配"],
        ["FollowUp", "跟进中"],
        ["PendingApprove", "待审核"],
        ["ToLinkToBeConfirm", "已拍"],
        ["InvitationManager", "邀约中"],
        ["Transacted", "已成交"],
      ]),
      tagInfo: {
        hasLink: true,
      },
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  onLoad(options) {
    console.log(options, "options");
    this.id = options.id;
    console.log(this.imgUrl, "erweima");
  },
  methods: {
    /**
     * 外出申请
     */
    applyOut() {
      uni.navigateTo({
        url: "/pagesA/customerOut/index?id=" + this.id,
      });
    },
    /**
     * 客资驳回
     */
    reloadCus() {
      uni.navigateTo({
        url: `/pages/customer/reject?id=${this.id}`,
      });
    },
    /**
     * 退款申请
     */
    gotoResourceRefund() {
      uni.navigateTo({
        url: `/pages/customer/resourceRefund?Id=${this.detail.customerResourceID}`,
      });
    },
    /**
     *
     * @param value 内容
     * @returns
     */
    copy(value) {
      console.log(value, "value");
      if (!value) {
        uni.showToast({
          title: "暂无内容可复制",
          icon: "none",
        });

        return;
      }
      uni.setClipboardData({
        data: value, //要被复制的内容
        success: () => {
          //复制成功的回调函数
          uni.showToast({
            //提示
            title: "复制成功",
          });
        },
        fail: (e) => {
          console.log(e);
        },
      });
    },
    /**
     * 展示二维码
     */
    showQRCode() {
      uni.previewImage({
        urls: [this.imgUrl + "/" + this.detail.contactQRCode],
      });
    },
    /**
     * 跳转链接
     */
    gotoReview() {
      uni.navigateTo({
        url: `/pages/customer/submitReview?id=${this.id}`,
      });
    },
    /**
     * 跳转链接
     */
    gotoUpdataLink() {
      uni.navigateTo({
        url: `/pagesA/uodataLink/index?linkId=${this.detail.customerResourceLinkID}&id=${this.id}`,
      });
    },
    /**
     * 编辑详情
     */
    editDetail(type = "record") {
      let hasName = "";
      if (
        this.detail.contactQRCode &&
        (this.detail.customerPhoneNumber == "" || this.detail.appNumber == "")
      ) {
        hasName = 1;
      }
      // hasName = 1;
      uni.navigateTo({
        url: `/pages/customer/editRecord?id=${this.id}&hasName=${hasName}&type=${type}`,
      });
    },
    /**
     * 拨打电话
     */
    callPhone() {
      console.log(this.detail.customerPhoneNumber);
      uni.makePhoneCall({
        phoneNumber: this.detail.customerPhoneNumber,
      });
    },
    /**
     * 获取详情
     */
    getDetail() {
      let data = {
        customerResourceID: this.id,
      };
      console.log(123);

      getCustomerInfoByID(data).then((res) => {
        console.log(res, "res");
        this.detail = res.data;
      });
    },
    /**
     * 获取标签
     */
    getTagInfo() {
      let data = {
        customerResourceID: this.id,
      };
      getCustomerTagByID(data).then((res) => {
        console.log(res, "res");
        this.tagInfo = res.data;
      });
    },
  },
  onShow() {
    this.getDetail();
    this.getTagInfo();
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>
<style lang="scss">
page {
  background-color: #f5f7fb;
}
</style>
<style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
}
.customer_info_card {
  position: relative;
  width: 670rpx;
  //   height: 326rpx;
  background: #ffffff;
  border-radius: 8rpx;
  padding: 24rpx 40rpx;
  box-sizing: border-box;

  .phoneIcon {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    padding: 11rpx;
    background-color: #f1effa;
    border-radius: 14rpx;
  }
  .customer_info_box {
    margin-top: 30rpx;
    .title {
      color: #1c1b2680;
      font-size: 20rpx;
    }
    .name {
      color: #1c1b26;
      font-size: 24rpx;
      margin-top: 18rpx;
      font-weight: 700;
    }
  }
  .tag_box {
    margin-top: 32rpx;
    .follow_tag {
      padding: 2rpx 42rpx;
      background: #fe8b00;
      border-radius: 100rpx 100rpx 100rpx 4rpx;
      color: #ffffff;
      font-size: 20rpx;
      margin-right: 24rpx;
    }
  }
}
.step_box {
  width: 670rpx;
  background: #ffffff;
  border-radius: 8rpx;
  padding: 25rpx 10rpx;
  box-sizing: border-box;
  margin-top: 24rpx;
}
.slot-icon {
  width: 21px;
  height: 21px;
  background-color: #9ea5b2;
  border-radius: 100px;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  text-align: center;
}
.slot-icon-haslink {
  width: 21px;
  height: 21px;
  background-color: #fbe6e8;
  border-radius: 100px;
  font-size: 12px;
  color: #a22c26;
  line-height: 21px;
  text-align: center;
  border: 1px solid #a22c26;
}
.custom-steps {
  ::v-deep .u-steps-item__line--row {
    height: 50px !important;
  }
}
.info_box {
  width: 670rpx;
  background: #ffffff;
  border-radius: 8rpx;
  margin-top: 24rpx;
  padding: 24rpx 40rpx;
  box-sizing: border-box;
  position: relative;
  .editIcon {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    padding: 10rpx;
    background: #e7f8fc;
    border-radius: 14rpx;
    display: flex;
    align-items: center;
    view {
      font-size: 20rpx;
      margin-left: 3rpx;
      line-height: 15rpx;
    }
  }
  .reloadIcon {
    background: #fbe6e8;
  }
}
.info_title {
  font-size: 20rpx;
  color: #1c1b2680;
  display: flex;
  align-items: center;
  view {
    margin-left: 10rpx;
  }
}
.iconbtn {
  display: flex;
}
.info_name {
  font-size: 24rpx;
  color: #1c1b26;
  margin-top: 18rpx;
  margin-bottom: 32rpx;
  font-weight: 700;
}
.edit_btn {
  position: fixed;
  right: 64rpx;
  bottom: 80rpx;
  background-color: #a22c26;
  border-radius: 50%;
  padding: 32rpx;
}
/* 备用穿透方案 */
::v-deep .u-steps-item__line--row {
  height: 2px !important;
}
/* 备用穿透方案 */
::v-deep .u-steps-item__line--row {
  height: 2px !important;
}
::v-deep .u-steps-item__wrapper--row {
  width: auto !important;
}
.tips {
  padding: 2rpx 18rpx;
  font-size: 18rpx;
  margin-right: 5rpx;
  margin-top: 8rpx;
  display: inline-block;
}
.s {
  color: #a22c26;
  border: 1rpx solid #a22c26;
  background-color: #fbe6e8;
}
.a {
  color: #fe8b00;
  border: 1rpx solid #fe8b00;
  background-color: #fff9eb;
}
.b {
  color: #52c41a;
  border: 1rpx solid #52c41a;
  background-color: #f6ffed;
}
.c {
  color: #1677ff;
  border: 1rpx solid #1677ff;
  background-color: #e6f4ff;
}
.d {
  color: #b088fa;
  border: 1rpx solid #b088fa;
  background-color: #f0e8ff;
}
.hasLink {
  color: #005ed2;
  background-color: #eff4fa;
}
.Approve {
  color: #52c41a;
  background-color: #f6ffed;
}
.info_card {
  padding-bottom: 120rpx;
}
.bot_btn {
  // background-color: #d52227;
  border-top: 1rpx solid #801c1b26;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 40rpx;
  // box-shadow: #a5a5a5 0px 0px 6px;
  padding: 20rpx;
  padding-bottom: 50rpx;
  background-color: white;
  box-sizing: border-box;
  .btn_width {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
</style>
